Bemästra JavaScript Concurrency: En djupdykning i parallell bearbetning av Promises

I landskapet för modern webbutveckling är prestanda inte en funktion; det är ett grundläggande krav. Användare över hela världen förväntar sig att applikationer ska vara snabba, responsiva och sömlösa. Kärnan i denna prestandautmaning, särskilt i JavaScript, är konceptet att hantera asynkrona operationer effektivt. Från att hämta data från ett API till att läsa en fil eller köra en databasfråga, är det många uppgifter som inte slutförs omedelbart. Hur vi hanterar dessa väntetider kan vara skillnaden mellan en trög applikation och en härligt smidig användarupplevelse.

JavaScript är till sin natur ett entrådat språk. Detta innebär att det bara kan exekvera en koddel åt gången. Detta kan låta som en begränsning, men JavaScripts händelseloop (event loop) och icke-blockerande I/O-modell gör att det kan hantera asynkrona uppgifter med otrolig effektivitet. Den moderna hörnstenen i denna modell är Promise – ett objekt som representerar det slutgiltiga slutförandet (eller misslyckandet) av en asynkron operation.

Men att bara använda Promises eller deras eleganta `async/await`-syntax garanterar inte automatiskt optimal prestanda. En vanlig fallgrop för utvecklare är att hantera flera oberoende asynkrona uppgifter sekventiellt, vilket skapar onödiga flaskhalsar. Det är här samtidig bearbetning av promises kommer in i bilden. Genom att starta flera asynkrona operationer parallellt och vänta på dem kollektivt kan vi dramatiskt minska den totala exekveringstiden och bygga mycket effektivare applikationer.

Denna omfattande guide tar dig med på en djupdykning i världen av JavaScript concurrency. Vi kommer att utforska verktygen som är inbyggda direkt i språket – `Promise.all()`, `Promise.allSettled()`, `Promise.race()` och `Promise.any()` – för att hjälpa dig att orkestrera parallella uppgifter som ett proffs. Oavsett om du är en junior utvecklare som håller på att bekanta dig med asynkronicitet eller en erfaren ingenjör som vill finslipa dina mönster, kommer denna artikel att utrusta dig med kunskapen för att skriva snabbare, mer motståndskraftig och mer sofistikerad JavaScript-kod.

Först, ett snabbt förtydligande: Concurrency vs. Parallellism

Innan vi fortsätter är det viktigt att klargöra två termer som ofta används omväxlande men som har distinkta betydelser inom datavetenskap: concurrency och parallellism.

• Concurrency (samtidighet) är konceptet att hantera flera uppgifter under en tidsperiod. Det handlar om att hantera många saker samtidigt. Ett system är 'concurrent' om det kan starta, köra och slutföra mer än en uppgift utan att vänta på att den föregående ska avslutas. I JavaScripts entrådsmiljö uppnås concurrency via händelseloopen, som låter motorn växla mellan uppgifter. Medan en långvarig uppgift (som en nätverksförfrågan) väntar, kan motorn arbeta med andra saker.
• Parallellism är konceptet att exekvera flera uppgifter samtidigt. Det handlar om att göra många saker på en gång. Sann parallellism kräver en flerkärnig processor, där olika trådar kan köras på olika kärnor exakt samtidigt. Även om web workers möjliggör sann parallellism i webbläsarbaserad JavaScript, avser den centrala concurrency-modellen vi diskuterar här den enda huvudtråden.

För I/O-bundna operationer (som nätverksförfrågningar) ger JavaScripts 'concurrent'-modell *effekten* av parallellism. Vi kan initiera flera förfrågningar samtidigt. Medan JavaScript-motorn väntar på svaren är den fri att utföra annat arbete. Operationerna sker 'parallellt' ur de externa resursernas (servrar, filsystem) perspektiv. Detta är den kraftfulla modell vi kommer att utnyttja.

Den sekventiella fällan: Ett vanligt anti-mönster

Låt oss börja med att identifiera ett vanligt misstag. När utvecklare först lär sig `async/await` är syntaxen så ren att det är lätt att skriva kod som ser synkron ut men som oavsiktligt är sekventiell och ineffektiv. Föreställ dig att du behöver hämta en användares profil, deras senaste inlägg och deras aviseringar för att bygga en instrumentpanel.

Ett naivt tillvägagångssätt kan se ut så här:

Exempel: Den ineffektiva sekventiella hämtningen

            
async function fetchDashboardDataSequentially(userId) {
    console.time('sequentialFetch');

    console.log('Fetching user profile...');
    const userProfile = await fetchUserProfile(userId); // Waits here

    console.log('Fetching user posts...');
    const userPosts = await fetchUserPosts(userId); // Waits here

    console.log('Fetching user notifications...');
    const userNotifications = await fetchUserNotifications(userId); // Waits here

    console.timeEnd('sequentialFetch');
    return { userProfile, userPosts, userNotifications };
}

// Imagine these functions take time to resolve
// fetchUserProfile -> 500ms
// fetchUserPosts -> 800ms
// fetchUserNotifications -> 1000ms

            

              
                Copy
              
            
          

Vad är fel med den här bilden? Varje `await`-nyckelord pausar exekveringen av funktionen `fetchDashboardDataSequentially` tills det aktuella promise-objektet har lösts. Förfrågan för `userPosts` startar inte ens förrän `userProfile`-förfrågan är helt klar. Förfrågan för `userNotifications` startar inte förrän `userPosts` har returnerats. Dessa tre nätverksförfrågningar är oberoende av varandra; det finns ingen anledning att vänta! Den totala tiden blir summan av alla individuella tider:

Total Time ≈ 500ms + 800ms + 1000ms = 2300ms

Detta är en enorm prestandaflaskhals. Vi kan göra mycket, mycket bättre.

Lås upp prestanda: Kraften i samtidig exekvering

Lösningen är att initiera alla asynkrona operationer på en gång, utan att omedelbart invänta dem med `await`. Detta låter dem köras samtidigt. Vi kan lagra de väntande Promise-objekten i variabler och sedan använda en Promise-kombinator för att vänta på att alla ska slutföras.

Exempel: Den effektiva samtidiga hämtningen

            
async function fetchDashboardDataConcurrently(userId) {
    console.time('concurrentFetch');

    console.log('Initiating all fetches at once...');
    const profilePromise = fetchUserProfile(userId);
    const postsPromise = fetchUserPosts(userId);
    const notificationsPromise = fetchUserNotifications(userId);

    // Now we wait for all of them to complete
    const [userProfile, userPosts, userNotifications] = await Promise.all([
        profilePromise,
        postsPromise,
        notificationsPromise
    ]);

    console.timeEnd('concurrentFetch');
    return { userProfile, userPosts, userNotifications };
}

            

              
                Copy
              
            
          

I denna version anropar vi de tre hämtningsfunktionerna utan `await`. Detta startar omedelbart alla tre nätverksförfrågningar. JavaScript-motorn lämnar över dem till den underliggande miljön (webbläsaren eller Node.js) och får tillbaka tre väntande Promises. Sedan används `Promise.all()` för att vänta på att alla tre av dessa promises ska lösas. Den totala tiden bestäms nu av den operation som tar längst tid, inte summan.

Total Time ≈ max(500ms, 800ms, 1000ms) = 1000ms

Vi har precis mer än halverat vår datahämtningstid! Detta är den grundläggande principen för parallell bearbetning av promises. Låt oss nu utforska de kraftfulla verktyg som JavaScript erbjuder för att orkestrera dessa samtidiga uppgifter.

Verktygslådan för Promise-kombinatorer: `all`, `allSettled`, `race` och `any`

JavaScript tillhandahåller fyra statiska metoder på `Promise`-objektet, kända som promise-kombinatorer. Var och en tar en itererbar samling (som en array) av promises och returnerar ett enda nytt promise. Beteendet hos detta nya promise beror på vilken kombinator du använder.

1. `Promise.all()`: Allt-eller-inget-metoden

`Promise.all()` är det perfekta verktyget när du har en grupp uppgifter som alla är kritiska för nästa steg. Det representerar det logiska "OCH"-villkoret: Uppgift 1 OCH Uppgift 2 OCH Uppgift 3 måste alla lyckas.

• Indata: En itererbar samling av promises.
• Beteende: Den returnerar ett enda promise som uppfylls (fulfills) när alla ingående promises har uppfyllts. Det uppfyllda värdet är en array med resultaten från de ingående promises, i samma ordning.
• Felläge: Den avvisar (rejects) omedelbart så snart något av de ingående promises avvisas. Anledningen till avvisningen är anledningen från det första promise som avvisades. Detta kallas ofta för "fail-fast"-beteende.

Användningsfall: Aggregering av kritisk data

Vårt instrumentpanelsexempel är ett perfekt användningsfall. Om du inte kan ladda användarens profil, kanske det inte är meningsfullt att visa deras inlägg och aviseringar. Hela komponenten är beroende av att alla tre datapunkter är tillgängliga.

            
// Helper to simulate API calls
const mockApiCall = (value, delay, shouldFail = false) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldFail) {
                reject(new Error(`API call failed for: ${value}`));
            } else {
                console.log(`Resolved: ${value}`);
                resolve({ data: value });
            }
        }, delay);
    });
};

async function loadCriticalData() {
    console.log('Using Promise.all for critical data...');
    try {
        const [profile, settings, permissions] = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700),
            mockApiCall('userPermissions', 500)
        ]);
        console.log('All critical data loaded successfully!');
        // Now render the UI with profile, settings, and permissions
    } catch (error) {
        console.error('Failed to load critical data:', error.message);
        // Show an error message to the user
    }
}

// What happens if one fails?
async function loadCriticalDataWithFailure() {
    console.log('\nDemonstrating Promise.all failure...');
    try {
        const results = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700, true), // This one will fail
            mockApiCall('userPermissions', 500)
        ]);
    } catch (error) {
        console.error('Promise.all rejected:', error.message);
        // Note: The 'userProfile' and 'userPermissions' calls may have completed,
        // but their results are lost because the whole operation failed.
    }
}

loadCriticalData();
// After a delay, call the failure example
setTimeout(loadCriticalDataWithFailure, 2000);


            

              
                Copy
              
            
          

Fallgrop med `Promise.all()`

Den primära fallgropen är dess fail-fast-natur. Om du hämtar data för tio olika, oberoende widgets på en sida, och ett API misslyckas, kommer `Promise.all()` att avvisas, och du förlorar resultaten för de andra nio lyckade anropen. Det är här vår nästa kombinator briljerar.

2. `Promise.allSettled()`: Den motståndskraftiga insamlaren

Introducerad i ES2020, var `Promise.allSettled()` en revolution för motståndskraft. Den är designad för när du vill veta utfallet av varje enskilt promise, oavsett om det lyckades eller misslyckades. Den avvisas aldrig.

• Indata: En itererbar samling av promises.
• Beteende: Den returnerar ett enda promise som alltid uppfylls. Det uppfylls när alla ingående promises har avgjorts (settled), antingen uppfyllts eller avvisats. Det uppfyllda värdet är en array av objekt, där varje objekt beskriver utfallet av ett promise.
• Resultatformat: Varje resultatobjekt har en `status`-egenskap.
  • Om uppfyllt: `{ status: 'fulfilled', value: theResult }`
  • Om avvisat: `{ status: 'rejected', reason: theError }`

Användningsfall: Icke-kritiska, oberoende operationer

Föreställ dig en sida som visar flera oberoende komponenter: en väder-widget, ett nyhetsflöde och en aktiekurs-ticker. Om nyhetsflödets API misslyckas vill du fortfarande visa väder- och aktieinformationen. `Promise.allSettled()` är perfekt för detta.

            
async function loadDashboardWidgets() {
    console.log('\nUsing Promise.allSettled for independent widgets...');
    const results = await Promise.allSettled([
        mockApiCall('Weather Data', 600),
        mockApiCall('News Feed', 1200, true), // This API is down
        mockApiCall('Stock Ticker', 800)
    ]);

    console.log('All promises have settled. Processing results...');
    
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`Widget ${index} loaded successfully with data:`, result.value.data);
            // Render this widget to the UI
        } else {
            console.error(`Widget ${index} failed to load:`, result.reason.message);
            // Show a specific error state for this widget
        }
    });
}

loadDashboardWidgets();

            

              
                Copy
              
            
          

Med `Promise.allSettled()` blir din applikation mycket mer robust. En enskild felpunkt orsakar inte en kaskad som river ner hela användargränssnittet. Du kan hantera varje utfall på ett elegant sätt.

3. `Promise.race()`: Först över mållinjen

`Promise.race()` gör exakt vad namnet antyder. Den ställer en grupp promises mot varandra och utser en vinnare så snart den första korsar mållinjen, oavsett om det var en framgång eller ett misslyckande.

• Indata: En itererbar samling av promises.
• Beteende: Den returnerar ett enda promise som avgörs (uppfylls eller avvisas) så snart det första av de ingående promises avgörs. Uppfyllnadsvärdet eller avvisningsanledningen för det returnerade promise-objektet blir detsamma som för det "vinnande" promise-objektet.
• Viktig notering: De andra promises avbryts inte. De kommer att fortsätta köras i bakgrunden, och deras resultat kommer helt enkelt att ignoreras av `Promise.race()`-kontexten.

Användningsfall: Implementera en timeout

Det vanligaste och mest praktiska användningsfallet för `Promise.race()` är att tvinga fram en timeout på en asynkron operation. Du kan låta din huvudoperation "tävla" mot ett `setTimeout`-promise. Om din operation tar för lång tid kommer timeout-promise att avgöras först, och du kan hantera det som ett fel.

            
function createTimeout(delay) {
    return new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`Operation timed out after ${delay}ms`));
        }, delay);
    });
}

async function fetchDataWithTimeout() {
    console.log('\nUsing Promise.race for a timeout...');
    try {
        const result = await Promise.race([
            mockApiCall('some critical data', 2000), // This will take too long
            createTimeout(1500) // This will win the race
        ]);
        console.log('Data fetched successfully:', result.data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchDataWithTimeout();

            

              
                Copy
              
            
          

Ett annat användningsfall: Redundanta ändpunkter

Du kan också använda `Promise.race()` för att fråga flera redundanta servrar om samma resurs och ta emot svaret från den server som är snabbast. Detta är dock riskabelt, för om den snabbaste servern returnerar ett fel (t.ex. en 500-statuskod), kommer `Promise.race()` att avvisas omedelbart, även om en något långsammare server skulle ha returnerat ett lyckat svar. Detta leder oss till vår sista, mer lämpliga kombinator för detta scenario.

4. `Promise.any()`: Den första som lyckas

Introducerad i ES2021, är `Promise.any()` som en mer optimistisk version av `Promise.race()`. Den väntar också på att det första promise-objektet ska avgöras, men den letar specifikt efter det första som uppfylls.

• Indata: En itererbar samling av promises.
• Beteende: Den returnerar ett enda promise som uppfylls så snart något av de ingående promises uppfylls. Uppfyllnadsvärdet är värdet från det första promise som uppfylldes.
• Felläge: Den avvisas endast om alla ingående promises avvisas. Avvisningsanledningen är ett speciellt `AggregateError`-objekt, som innehåller en `errors`-egenskap – en array med alla individuella avvisningsanledningar.

Användningsfall: Hämtning från redundanta källor

Detta är det perfekta verktyget för att hämta en resurs från flera källor, som primära och backup-servrar eller flera Content Delivery Networks (CDN). Du bryr dig bara om att få ett lyckat svar så snabbt som möjligt.

            
async function fetchResourceFromMirrors() {
    console.log('\nUsing Promise.any to find the fastest successful source...');
    try {
        const resource = await Promise.any([
            mockApiCall('Primary CDN', 800, true), // Fails quickly
            mockApiCall('European Mirror', 1200), // Slower but will succeed
            mockApiCall('Asian Mirror', 1100) // Also succeeds, but is slower than the European one
        ]);
        console.log('Resource fetched successfully from a mirror:', resource.data);
    } catch (error) {
        if (error instanceof AggregateError) {
            console.error('All mirrors failed to provide the resource.');
            // You can inspect individual errors:
            error.errors.forEach(err => console.log('- ' + err.message));
        }
    }
}

fetchResourceFromMirrors();

            

              
                Copy
              
            
          

I det här exemplet kommer `Promise.any()` att ignorera det snabba misslyckandet från den primära CDN:en och vänta på att den europeiska spegelservern (European Mirror) ska uppfyllas, varpå den kommer att lösas med den datan och i praktiken ignorera resultatet från den asiatiska spegelservern.

Att välja rätt verktyg för jobbet: En snabbguide

Med fyra kraftfulla alternativ, hur bestämmer du dig för vilket du ska använda? Här är ett enkelt ramverk för beslutsfattande:

• Behöver jag resultaten från ALLA promises, och är det en katastrof om NÅGOT av dem misslyckas?
  Använd Promise.all(). Detta är för tätt kopplade allt-eller-inget-scenarier.
• Behöver jag veta utfallet av ALLA promises, oavsett om de lyckas eller misslyckas?
  Använd Promise.allSettled(). Detta är för hantering av flera oberoende uppgifter där du vill bearbeta varje utfall och bibehålla applikationens motståndskraft.
• Bryr jag mig bara om det allra första promise-objektet som blir klart, oavsett om det är en framgång eller ett misslyckande?
  Använd Promise.race(). Detta är primärt för att implementera timeouts eller andra kapplöpningssituationer där det första resultatet (av vilket slag som helst) är det enda som spelar roll.
• Bryr jag mig bara om det första promise-objektet som LYCKAS, och kan jag ignorera de som misslyckas?
  Använd Promise.any(). Detta är för scenarier som involverar redundans, som att prova flera ändpunkter för samma resurs.

Avancerade mönster och överväganden från verkligheten

Även om promise-kombinatorerna är otroligt kraftfulla, kräver professionell utveckling ofta lite mer nyans.

Begränsning av samtidighet och strypning (throttling)

Vad händer om du har en array med 1 000 ID:n och du vill hämta data för var och en? Om du naivt skickar alla 1 000 promise-genererande anrop till `Promise.all()`, kommer du omedelbart att avfyra 1 000 nätverksförfrågningar. Detta kan ha flera negativa konsekvenser:

• Serveröverbelastning: Du kan överbelasta servern du anropar, vilket leder till fel eller försämrad prestanda för alla användare.
• Rate Limiting (hastighetsbegränsning): De flesta publika API:er har hastighetsbegränsningar. Du kommer troligen att slå i taket och få `429 Too Many Requests`-fel.
• Klientresurser: Klienten (webbläsare eller server) kan ha svårt att hantera så många öppna nätverksanslutningar samtidigt.

Lösningen är att begränsa samtidigheten genom att bearbeta promises i batcher. Även om du kan skriva din egen logik för detta, hanterar mogna bibliotek som `p-limit` eller `async-pool` detta elegant. Här är ett konceptuellt exempel på hur du kan närma dig det manuellt:

            
async function processInBatches(items, batchSize, processingFn) {
    let results = [];
    for (let i = 0; i < items.length; i += batchSize) {
        const batch = items.slice(i, i + batchSize);
        console.log(`Processing batch starting at index ${i}...`);
        
        const batchPromises = batch.map(processingFn);
        const batchResults = await Promise.allSettled(batchPromises);
        results = results.concat(batchResults);
    }
    return results;
}

// Example usage:
const userIds = Array.from({ length: 20 }, (_, i) => i + 1);

// We will process 20 users in batches of 5
processInBatches(userIds, 5, id => mockApiCall(`user_${id}`, Math.random() * 1000))
    .then(allResults => {
        console.log('\nBatch processing complete.');
        const successful = allResults.filter(r => r.status === 'fulfilled').length;
        const failed = allResults.filter(r => r.status === 'rejected').length;
        console.log(`Total Results: ${allResults.length}, Successful: ${successful}, Failed: ${failed}`);
    });

            

              
                Copy
              
            
          

En notering om avbrytande (cancellation)

En långvarig utmaning med inbyggda Promises är att de inte kan avbrytas. När du väl har skapat ett promise kommer det att köras till slutförande. Även om `Promise.race` kan hjälpa dig att ignorera ett långsamt resultat, fortsätter den underliggande operationen att förbruka resurser. För nätverksförfrågningar är den moderna lösningen `AbortController`-API:et, som låter dig signalera till en `fetch`-förfrågan att den ska avbrytas. Att integrera `AbortController` med promise-kombinatorer kan ge ett robust sätt att hantera och städa upp långvariga samtidiga uppgifter.

Slutsats: Från sekventiellt till samtidigt tänkande

Att bemästra asynkron JavaScript är en resa. Den börjar med att förstå den entrådiga händelseloopen, fortsätter med att använda Promises och `async/await` för tydlighet, och kulminerar i att tänka samtidigt för att maximera prestanda. Att skifta från ett sekventiellt `await`-tänkesätt till ett parallellt-först-synsätt är en av de mest effektfulla förändringarna en utvecklare kan göra för att förbättra applikationens responsivitet.

Genom att utnyttja de inbyggda promise-kombinatorerna är du rustad för att hantera en mängd olika verkliga scenarier med elegans och precision:

• Använd `Promise.all()` för kritiska allt-eller-inget-databeroenden.
• Lita på `Promise.allSettled()` för att bygga motståndskraftiga gränssnitt med oberoende komponenter.
• Använd `Promise.race()` för att upprätthålla tidsgränser och förhindra oändliga väntetider.
• Välj `Promise.any()` för att skapa snabba och feltoleranta system med redundanta datakällor.

Nästa gång du skriver flera `await`-uttryck i rad, pausa och fråga dig själv: "Är dessa operationer verkligen beroende av varandra?" Om svaret är nej, har du ett utmärkt tillfälle att refaktorera din kod för samtidighet. Börja initiera dina promises tillsammans, välj rätt kombinator för din logik och se din applikations prestanda skjuta i höjden.